<%-- 
    Document   : researchapprovals
    Created on : 22 Sep 2013, 12:09:12 AM
    Author     : Salman Noor : School of Electrical and Information Engineering
--%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">Approve/Decline Academic Staff <strong>Research</strong></h1>   
                    <div id="example" class="k-content tableContainer">
                        <input name='baseURL' type='hidden' value='<c:url value="/approvals/Research/"/>'/>

                        <div   class="k-content tableContainer"> 
                            <div id="grid"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/x-kendo-template" id="template">
                     <div class="tabstrip">
                         <ul>
                             <li class="k-state-active">
                                Research Information
                             </li>
                             <li>
                                 Academic Staff Member Information
                             </li>
                         </ul>
                         <div>
                             <div class='employee-details'>
                                 <ul>
                                     <li><label>Research Topic:</label>#= research_topic  #</li>
                                     <li><label>Research Description:</label>#= research_description  #</li>
                                     <li><label>Research Hours:</label>#= research_hours  #</li>
                                     <li><label>Research Time Span:</label>#= research_start_date+' - '+research_end_date  #</li>
                                     <li><label>Taking Sabbatical:</label>#= research_sabbatical  #</li>
                                     <li><label>Sabbatical Time Span:</label>#= sabbatical_start_date+' - '+sabbatical_end_date  #</li>
                                 </ul>
                             </div>
                         </div>
                         <div>
                             <div class='employee-details'>
                                 <ul>
                                     <li><label>First Name:</label>#= academic_staff_member.firstname  #</li>
                                     <li><label>Last Name:</label>#= academic_staff_member.lastname  #</li>
                                     <li><label>Email Address:</label>#= academic_staff_member.email_address  #</li>
                                
                                     <li><label>Staff Number:</label>#= academic_staff_member.staff_number  #</li>
                                     <li><label>Discipline Code:</label>#= academic_staff_member.discipline_code  #</li>
                                
                                     <li><label>Citizenship Percentage:</label>#= academic_staff_member.citizenship_percentage  #</li>
                                     <li><label>Contract Type:</label>#= academic_staff_member.contract_type  #</li>
                                     <li><label>Job Position:</label>#= academic_staff_member.job_position  #</li>
                                     <li><label>Qualification:</label>#= academic_staff_member.qualification  #</li>
                                     <li><label>Research Percentage:</label>#= academic_staff_member.research_percentage  #</li>
                                     <li><label>Teaching Percentage:</label>#= academic_staff_member.teaching_percentage  #</li>
                                     <li><label>Total Hours:</label>#= academic_staff_member.total_hours  #</li>
                                
                                 </ul>
                             </div>
                         </div>
                     </div>

        </script>
        <script>
            $(document).ready(function() {
                var baseURL = $("input[name='baseURL']").val();
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                url: baseURL + "read",
                                dataType: "json"
                            }
                        },
                        pageSize: 20
                    },
                    height: 430,
                    sortable: true,
                    pageable: true,
                    detailTemplate: kendo.template($("#template").html()),
                    detailInit: detailInit,
                    columns: [
                        {
                            title: "Name",
                            template: "#=academic_staff_member.firstname +' '+ academic_staff_member.lastname#",
                            filterable: false,
                            attributes: {
                                "class": "table-cell"
                            },
                            width: 90
                        },
                        {
                            field: "research_topic",
                            title: "Research Topic",
                            attributes: {
                                "class": "table-cell"
                            },
                            width: 100
                        },
                        {
                            field: "research_hours",
                            title: "Hours",
                            width: 40,
                            type: "number",
                            attributes: {
                                "class": "table-cell"
                            }
                        },
                        {
                            template: "#=research_start_date+'-'+research_end_date#",
                            title: "Duration",
                            attributes: {
                                "class": "table-cell"
                            },
                            width: 120
                        },
                        {
                            field: "research_sabbatical",
                            title: "Taking Sabbatical",
                            width: 75,
                            type: "boolean",
                            attributes: {
                                "class": "table-cell"
                            }
                        },
                        {title: "Approve/Decline", width: 130, command: [
                                {
                                    name: "approve",
                                    click: function(e) {
                                        // command button click handler
                                        var $tableRow = $(e.currentTarget).closest("tr");
                                        var dataItem = this.dataItem($tableRow);
                                        console.log(dataItem);

                                        $.ajax({
                                            type: "POST",
                                            async: true,
                                            url: baseURL + "approve",
                                            data: {research_allocation_id: dataItem.research_allocation_id},
                                            error: function(xhr, status, error) {
                                                alert("An error has occured. Caused by: " + error);
                                            },
                                            success: function(data) {
                                                $tableRow.effect("pulsate", {}, 1000);
                                                $tableRow.find("td").addClass("k-success-colored", 1500, "easeInOutBounce", function() {
                                                    $tableRow.hide("drop", {}, 500, function() {
                                                        var grid = $("#grid").data("kendoGrid");
                                                        grid.removeRow($tableRow);
                                                    });
                                                });
                                            }
                                        });
                                    }
//                   template: "<div class='k-button k-button-icontext k-grid-approve'><span class='k-icon k-i-tick'></span></div>"
                                },
                                {
//         template: "<div class='k-button'><span class='k-icon k-i-close'></span>decline</div>",
                                    name: "decline",
                                    click: function(e) {
                                        // command button click handler
                                        var $tableRow = $(e.currentTarget).closest("tr");
                                        var dataItem = this.dataItem($tableRow);
                                        $.ajax({
                                            type: "POST",
                                            async: true,
                                            url: baseURL + "decline",
                                            data: {research_allocation_id: dataItem.research_allocation_id},
                                            error: function(xhr, status, error) {
                                                alert("An error has occured. Caused by: " + error);
                                            },
                                            success: function(data) {
                                                $tableRow.effect("pulsate", {}, 1000);
                                                $tableRow.find("td").addClass("k-error-colored", 1500, "easeInOutBounce", function() {
                                                    $tableRow.hide("drop", {}, 500, function() {
                                                        var grid = $("#grid").data("kendoGrid");
                                                        grid.removeRow($tableRow);
                                                    });
                                                });
                                            }
                                        });
                                    }
                                }
                            ]
                        }
                    ]
                });

            });


            function detailInit(e) {
                var detailRow = e.detailRow;

                detailRow.find(".tabstrip").kendoTabStrip({
                    animation: {
                        open: {effects: "fadeIn"}
                    }
                });


            }
        </script>
        <style>
            .tableContainer{
                font-size: 75% !important;
            }
            .table-cell{
                font-size: 11px;
                text-align: left;
                color: #2E2E2E;
            }
            .k-header {
                font-size: 11px;
            }
            .k-button{
                font-size: 11px; 
            }

            .k-detail-cell .k-tabstrip .k-content {
                padding: 0.2em;
            }
            .employee-details ul
            {
                list-style:none;
                font-style:italic;
                margin: 15px;
                padding: 0;
            }
            .employee-details ul li
            {
                margin: 0;
                line-height: 1.7em;
            }

            .employee-details label
            {
                display:inline-block;
                width:130px;
                padding-right: 10px;
                text-align: right;
                font-style:normal;
                font-weight:bold;
            }
        </style>

    </body>
</html>
